<template>
	<view style="width: 100%; height:500rpx">
		<l-f2 ref="chart"></l-f2>
	</view>
</template>
<script>
	// 非 nvue 页面需要引进
	import F2 from '../l-f2/f2-all.min';
	export default {
	    data() {
	        return {
	            baseData: [{ genre: '成犬粮', sold: 275 }, { genre: '化毛膏', sold: 115 }, { genre: '益生菌', sold: 120 }, { genre: '氨糖', sold: 350 }, { genre: '其它', sold: 150 }],
	        };
	    },
	    mounted() {
	        this.$refs.chart.init(config => {
	            const chart = new F2.Chart(config);
	            chart.source(this.baseData);
	            chart
	                .interval()
	                .position('genre*sold')
	                .color('genre');
	            chart.render();
	            // 需要把 chart 返回
	            return chart;
	        });
			
			
			setTimeout(() => {
				this.baseData[1].sold = 250
				const newData = this.baseData
				this.$refs.chart.changeData(newData)
			},5000)
	    }
	}
</script>